<template>
    <ul class="pmlist">
        <li>
            <visit-bonus-rank 
            :lists='data2' 
            keyName='adPlaceTitle'
            keyValue='totalPv'
            keyType="PV"
            :maxValue="(data2 && data2.length>0)?data2[0].totalPv:1"
            :title="title1"
            />
        </li>
    </ul>
    <ul class="pmlist">
        <li>
            <visit-bonus-rank 
            :lists='data3'
            keyName='adPlaceTitle'
            keyValue='totalCxt'
            keyType="PV"
            :maxValue="(data3 && data3.length>0)?data3[0].totalCxt.num:1"
            :title="title2"/>
        </li>
    </ul>
    <ul class="pmlist">
        <li>
            <visit-bonus-rank 
            :lists='data1' 
            :textType="2"
            keyName='adPlaceTitle'
            :keyValue='showval'
            :keyType="keytxt"
            :maxValue="maxValue1"
            @onTab="getRkData"/>
            
        </li>
    </ul>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,onMounted,computed} from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import visitBonusRank from '../components/visitBonusRanking.vue'
import { useI18n } from 'vue-i18n'

export default {
    components:{
       visitBonusRank
    },
    props:{

    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()
        const {t} = useI18n()

        const state = reactive({
            userInfo:computed(()=>store.state.base.userInfo),
            data1:[],
            data2:[],
            showval:'totalPv',
            keytxt:'Visits',
            data3:[],
            maxValue1:1,
            title1:t('ranking.title1'),
            title2:t('ranking.title2')
        })

        onMounted(()=>{
            getGlobalRank(1)
            getVisitRank()
            getIncomeRank()
        })
        const getGlobalRank = (rankType)=>{  //我的投放访问量排行、我的奖金发放排行
            store.dispatch('ad/get_global_rank',{
                limit: 20,
                orderField: "",
                orderType: "",
                page: 1,
                rankType, // 1pv,2uv,3奖金
                walletAddress: state.userInfo.walletAddress
            }).then(res=>{
                state.data1 = res.data || []
                if(res.data && res.data.length>0){
                    if(state.showval == 'totalPv'){
                        state.maxValue1 = res.data[0].totalPv
                    }else if(state.showval=='totalCxt'){
                        state.maxValue1 = res.data[0].totalCxt.num
                        console.log("UUUUU2:",state.maxValue1)
                    }
                }
            })
        }
        const getRkData = (index)=>{
            if(index==1){
                state.keytxt='Visits'
                state.showval = 'totalPv'
            }else{
                state.keytxt='Reward(CXT)'
                state.showval = 'totalCxt'
            }
            getGlobalRank(index)
        }

        const getVisitRank = ()=>{ // 全球广告位访问量排行
            store.dispatch('ad/get_ads_visit_rank',{
               // pageSize:20,
                walletAddress:state.userInfo.walletAddress
            }).then(res=>{
                state.data2 = res.data || []
            })
        }
        const getIncomeRank =()=>{ // 全球广告收入排行
            store.dispatch('ad/get_ads_income_rank',{
                pageSize:50,
                walletAddress:state.userInfo.walletAddress
            }).then(res=>{
                state.data3 = res.data
            })
        }

        return{
            ...toRefs(state),
            getRkData,
            getVisitRank,
            getIncomeRank
        }
    }
}
</script>

<style lang="scss" scoped>
    .pmlist{
        flex: 1;
        flex-shrink: 0;
        min-width: 400px;
        background: url(/images/flowRanking/pmitbg.png) left top no-repeat;
        background-size: 100% 100%;
        padding: 0 0 20px 0;
        &+.pmlist{
            margin: 0 0 0 25px;
        }
        li{
            display: flex;
            flex-flow: column;
            height: 100%;
            padding:15px 10px 10px 10px;
        }
    }
   
</style>